<template>
	<view>
		<view class="custom-navbar" :style="{'height':capsuleTop}">
			<view class="custom-navbar-title">
				会员中心
			</view>
			<image class="custom-close-img" :src="clsoeImg" mode="" @click="close"></image>
		</view>
		<view class="content" :style="{'margin-top':capsuleTop}">
			<view class="top" :style="{'backgroundImage':`url(${poprp1})`}" @click="memberfn">
				<view class="top-left">
					<view class="top-left-img">
						<image class="top-img" :src="icon" mode=""></image>
					</view>
					<view class="top-left-name">
						<view class="top-left-names">
							薛定谔的猫
						</view>
						<view class="">
							<image class="left-img" :src="icon1" mode=""></image>
						</view>
					</view>
				</view>
				<view class="text1">
					至尊会员年卡
				</view>
				<view class="text2">
					有效期365天
				</view>
				<view class="text3">
					￥199
				</view>

				<image class="cards-img" :src="icon2" mode=""></image>
				<image class="cards-imgs" :src="icon3" mode=""></image>
			</view>
			<view class="card1" :style="{'backgroundImage':`url(${poprp2})`}">
				<view class="card1-top">
					<image class="cards1-img" :src="icon4" mode=""></image>
					<text class="card1-top-text"> 截至目前开通人数</text>
					<image class="cards1-img" :src="icon5" mode=""></image>
				</view>
				<view class="card1-cc">
					<view class="card1-ca" v-for="item in 5">
						<text class="card1-ca-text">2</text>
					</view>
				</view>
				<view class="card1-q">
					<image class="card1-q-img" :src="icon6" mode=""></image>
					<text class="card1-q-text">薛定谔的袋...成功开通了会员</text>

				</view>
			</view>
			<view class="card1" :style="{'backgroundImage':`url(${poprp2})`}">
				<view class="card1-top">
					<image class="cards1-img" :src="icon4" mode=""></image>
					<text class="card1-top-text"> 粉丝社群</text>
					<image class="cards1-img" :src="icon5" mode=""></image>
				</view>
				<view class="card1-e">
					<view class="card1-e-b">
						<image class="cards1-e-img" :src="icon7" mode=""></image>
					</view>
					<view class="" style="flex: 1;">
						<view class="card1-e-text">
							湘雅百岁人生俱乐部粉丝微信群：讯息自动通知可邀请您加入社群，优惠信息提前知道不错过任何活动。
						</view>
					</view>

				</view>

			</view>
			<view class="footer" :style="{'backgroundImage':`url(${poprp3})`}">
				<view class="footer-l">
					<image class="footer-l-img" :src="icon8" mode=""></image>
				</view>
				<view class="footer-f">
					<view class="footer-text" style="margin-top: 16rpx;">
						会员专属客服服务
					</view>
					<view class="footer-text" style="margin-top: 16rpx;">
						会员咨询，权益和加群都来找我吧~
					</view>
				</view>
				<view class="footer-q">
					<image class="footer-q-img" :src="icon9" mode=""></image>
				</view>
			</view>
			<view class="btn" @click="memberfn">
				开通会员
			</view>
		</view>
		<view>
			<u-popup v-model="shows" mode="bottom" height="700px" closeable="true">
				<view class="foo-li" style="padding-bottom: 60rpx;">

					<view class="popup-content" :style="{'backgroundImage':`url(${poprp4})`}">
						<view class="popup-title">
							开通会员
						</view>
						<view class="p-title">
							选择会员类型
						</view>


					</view>
					<view class="q-list">
						<view class="p-cards" v-for="(item,index) in card" :key="index" @click="memberBtn(item,index)">
							<view class="p-cards-l">
								<image class="p-cards-l-img" :src="icon10" mode=""></image>
							</view>
							<view class="p-cards-c">
								<view class="qo">
									<text class="qo-t1">{{item.title}}</text><text
										class="qo-t2">有效期：{{item.days}}天</text>
								</view>
								<view class="">
									<text class="qo-t3">￥{{item.price}}</text>
									<view class="qo-t4">
										<view class="qo-t5">

										</view>
										<view class="qo-t6">￥{{item.price}}</view>
									</view>
								</view>
								<view class="qo-t2" style="margin-left: 0;">
									{{item.dec}}
								</view>
							</view>
							<view class="p-cards-r">
								<image v-if="meberShow == index" class="p-cards-r-img" :src="icon12" mode=""></image>
								<image v-else class="p-cards-r-img" :src="icon11" mode=""></image>

							</view>
						</view>
					</view>
					<view class="p-title">
						填写您的个人信息
					</view>
					<view class="li-list">
						<view class="li-lists">
							<text class="li-lists-text">姓名：</text>
							<input class="li-lists-ipt" v-model="name" type="text" placeholder="请输入您的姓名" />
						</view>
						<view class="li-lists">
							<text class="li-lists-text">电话：</text>
							<input class="li-lists-ipt" v-model="phone" type="text" placeholder="请输入您的号码" disabled />
							<button v-if="!phone" class="phone-btn" open-type="getPhoneNumber"
								@getphonenumber="handlePhone">授权</button>
						</view>
						<view class="li-lists">
							<text class="li-lists-text">邀请码：</text>
							<input class="li-lists-ipt" v-model="Invitation" type="text" placeholder="请输入邀请码（选填）：" />
						</view>
					</view>
					<view class="p-title">
						开通有礼
					</view>
					<view class="tip">
						<view class="tip-text" v-for="item in 3" :key="item">
							一、凡开通会员送平台或商家大额代金券
						</view>
					</view>
					<view class="button">
						<view class="button-one">
							合计：
						</view>
						<view class="button-two">
							￥{{price}}
						</view>
						<view class="button-three" @click="payFn">
							立即购买
						</view>
					</view>
				</view>

			</u-popup>

		</view>
	</view>
</template>

<script>
	import {
		log
	} from 'util';

	export default {
		components: {

		},
		data() {
			return {
				shows: false,
				show: false,
				card: [],
				meberShow: 0, //选中状态
				price: '',
				name: '',
				Invitation: '',
				content: '东临碣石，以观沧海',
				phone: '',
				capsuleTop: uni.getMenuButtonBoundingClientRect().top + 35.5 + 'px',
				icon: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member12.png',
				icon1: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member7.png',
				icon2: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member2.png',
				icon3: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member8.png',
				icon4: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member4.png',
				icon5: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member5.png',
				icon6: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member14.png',
				icon7: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member15.png',
				icon8: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member1.png',
				icon9: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member6.png',
				clsoeImg: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/close.png',
				icon10: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member2/1.png',
				icon11: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member2/2.png',
				icon12: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member2/3.png',

				poprp1: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member13.png',
				poprp2: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member10.png',
				poprp3: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/members/member9.png',
				poprp4: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member2/4.png',
			}
		},
		onLoad() {

		},
		onShow() {
			this.getIndex();
		},
		watch: {
			show(newVal) {

				if (newVal && this.da.time > 0) {
					this.$refs.uCountDown.start();
				}
			},
		},
		methods: {
			memberBtn(item, index) {
				this.meberShow = index;
				this.price = item.price;
			},
			close() {
				uni.navigateBack();
			},
			memberfn() {
				this.shows = true;
			},
			open() {
				this.show = true;
			},
			payFn() {
				if (!this.name) {
					new this.$Toast('请填写姓名').showtoast()
				} else if (!this.phone) {
					new this.$Toast('请授权获取手机号').showtoast()
				} else {
					this.paymentRequest();
				}

			},
			//获取首页信息
			async getIndex() {
				try {
					let data = await new this.Request(this.Urls.m().member).modepost();
					console.log(data, 'data');
					this.card = data.data.card;
					this.phone = data.data.user.phone;
					this.price = this.card[this.meberShow].price;

				} catch (e) {
					console.log(e, 'e')

				}

			},
			async handlePhone(e) {

				let params = {
					code: e.detail.code
				};
				try {
					let data = await new this.Request(this.Urls.m().getphone, params).modepost();
					uni.setStorageSync('phone', data.data.phone);
					uni.setStorageSync('token', data.data.token);
					uni.setStorageSync('userid', data.data.userid);
					this.phone = data.data.phone;
					new this.$Toast('获取成功').showtoast()
				} catch (e) {
					console.log(e, 'e')
					new this.$Toast('获取失败').showtoast()
				}

			},
			//微信支付
			paymentRequest() {
				uni.login({
					provider: 'weixin',
					success: ret => {
						let code = ret.code; //增加code参数
						//create order
						this.payCheck(code);

					}
				});

			},
			async payCheck(codes) {

				let code = {
					code: codes,
					payee: this.card[this.meberShow].price == 0 ? '' : this.card[this.meberShow].price,
					type: this.card[this.meberShow].id,
					name: this.name,
					phone: this.phone,
					Invitation: this.Invitation,
					store: '1'
				}

				let data = await new this.Request(this.Urls.m().check, code).modepost();

				if (data.code == 0) {
					let resOrderId = data.data.orderid;
					if (resOrderId) {
						uni.requestPayment({
							//微信
							provider: 'wxpay',
							timeStamp: data.data.timeStamp,
							nonceStr: data.data.nonceStr,
							package: data.data.package,
							signType: 'MD5',
							paySign: data.data.paySign,


							success: (resultData) => {
								//Check if payment is successful
								//支付接口
								this.modifyAdd(resOrderId);
								// this.$u.api.checkPaymentSuccess({
								// 	order_id: resOrderId,

								// }).then((retu) => {
								// 	if (retu.code == 1) {

								// 		//payment successful

								// 	} else {
								// 		new this.$Toast(retu.msg)
								// 			.showtoast()
								// 	};
								// }).catch(err => {
								// 	new this.$Toast('支付失败！')
								// 	.showtoast()
								// });

							},
							fail: () => {
								new this.$Toast('支付失败！').showtoast()
							}
						});
					};
				} else {
					new this.$Toast('支付失败！').showtoast()
				};

			},
			async modifyAdd(resOrderId) {
				let obj = {
					orderid: resOrderId
				}
				try {
					let data = await new this.Request(this.Urls.m().check_pay, obj).modepost();

				} catch (e) {
					console.log(e, 'e')

				}

			}
		}
	}
</script>
<style>
	page {
		height: 100%;
		background: #2B1307
	}
</style>
<style lang="scss" scoped>
	.custom-navbar {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		text-align: center;
		font-size: 44rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 500;
		color: #fff;
		/* 导航栏高度 */
		background-image: linear-gradient(to right, #2B1307 0%, #2B1307 100%);
		/* 渐变色 */
		/* 其他样式 */
	}

	.custom-navbar-title {
		width: 100%;
		position: absolute;
		bottom: 10rpx;
		text-align: center;
	}

	.custom-close {
		width: 750rpx;
		position: relative;
	}

	.custom-close-img {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		bottom: 30rpx;
		left: 30rpx;
	}

	.custom-close-title {
		width: 100%;
		text-align: center;
	}

	.custom-top {
		width: 100%;
	}

	.top-height {
		background: linear-gradient(to right, #51D3F4, #fff);
	}

	.content {
		background-image: linear-gradient(to bottom, #2B1307 0%, #111317 100%);
		box-sizing: border-box;
		padding-bottom: 65rpx;
		overflow: hidden;
	}

	.top {
		position: relative;
		padding: 39rpx 0 0 26rpx;
		margin: 70rpx auto 0;
		width: 696rpx;
		height: 373rpx;
		background: no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
	}

	.top-left {
		display: flex;
	}

	.top-left-img {
		width: 100rpx;
		height: 100rpx;
	}

	.top-img {
		width: 100rpx;
		height: 100rpx;
	}

	.top-left-name {
		margin-left: 25rpx;
		flex: 1;

	}

	.top-left-names {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #E29463;
	}

	.left-img {
		margin-top: 6rpx;
		width: 108rpx;
		height: 56rpx;
	}

	.text1 {
		margin-top: 36rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #E29463;
	}

	.text2 {
		margin-top: 17rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #E29463;
	}

	.text3 {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #E29463;
	}

	.cards-img {
		display: block;
		position: absolute;
		top: -51rpx;
		right: 8rpx;
		width: 262rpx;
		height: 262rpx;
	}

	.cards-imgs {
		display: block;
		position: absolute;
		bottom: 53rpx;
		right: 31rpx;
		width: 238rpx;
		height: 64rpx;
	}

	.card1 {
		position: relative;
		padding-top: 55rpx;
		margin: 56rpx auto 0;
		width: 696rpx;
		height: 360rpx;
		background: no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		text-align: center;
	}

	.cards1-img {
		width: 52rpx;
		height: 4rpx;
		vertical-align: middle;
	}

	.card1-top-text {
		margin: 0 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #E29463;
		vertical-align: middle;

	}

	.card1-cc {
		margin: 10rpx auto 0;
	}

	.card1-ca {
		margin: 48rpx 17rpx 0;
		display: inline-block;
		width: 56rpx;
		height: 84rpx;
		background: #FFE3A4;
		text-align: center;
		line-height: 84rpx;
		border-radius: 8rpx;
	}

	.card1-ca-text {
		font-size: 48rpx;
		font-family: DIN;
		font-weight: bold;
		color: block;
	}

	.card1-q {
		margin: 50rpx auto 0;
		text-align: center;
	}

	.card1-q-img {
		width: 34rpx;
		height: 34rpx;
		vertical-align: middle;
	}

	.card1-q-text {
		font-size: 24rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFE2A4;
	}

	.card1-e {
		display: flex;
	}

	.card1-e-b {
		overflow: hidden;
		margin: 42rpx 0 0 88rpx;
		width: 182rpx;
		height: 182rpx;
		background: #FFA438;
		border-radius: 16rpx;
	}

	.cards1-e-img {
		vertical-align: middle;
		width: 178rpx;
		height: 178rpx;
	}

	.card1-e-text {
		margin: 42rpx 0 0 61rpx;
		width: 311rpx;
		height: 137rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFE2A4;
		line-height: 38rpx;
		vertical-align: middle;
	}

	.footer {
		padding: 30rpx 27rpx 0;
		display: flex;
		margin: 56rpx auto 0;
		width: 696rpx;
		height: 184rpx;
		background: no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
	}

	.footer-l {
		width: 102rpx;
		height: 102rpx;
	}

	.footer-l-img {
		width: 102rpx;
		height: 102rpx;
	}

	.footer-q {
		width: 64rpx;
		height: 58rpx;
	}

	.footer-f {
		margin-left: 26rpx;
		flex: 1;
	}

	.footer-text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFE2A4;
	}

	.footer-q-img {
		margin-top: 20rpx;
		width: 64rpx;
		height: 58rpx;
	}

	.btn {
		margin: 64rpx auto 0;
		width: 696rpx;
		height: 90rpx;
		background: #F5D792;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		text-align: center;
		line-height: 90rpx;
	}

	.popup-title {
		text-align: center;
		margin: 40rpx auto;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 38rpx;
	}

	.popup-content {
		overflow: hidden;
		width: 100%;
		height: 260rpx;
		background: no-repeat;
		background-size: 100% 100%;
	}

	.p-title {
		margin: 20rpx 0 0 27rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.p-cards {
		margin-top: 60rpx;
		margin-left: 24rpx;
		display: flex;
	}

	.p-cards-l {
		margin-left: 29rpx;
		width: 124rpx;
		height: 124rpx;
	}

	.p-cards-l-img {
		width: 124rpx;
		height: 124rpx;
	}

	.p-cards-r {
		margin: 40rpx 56rpx 0 0;
		width: 48rpx;
		height: 48rpx;
	}

	.p-cards-r-img {
		width: 48rpx;
		height: 48rpx;
	}

	.p-cards-c {
		margin-left: 20rpx;
		flex: 1;
	}

	.qo {
		margin-top: 20rpx;
	}

	.qo-t1 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.qo-t2 {
		margin-left: 59rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.qo-t3 {
		font-size: 42rpx;
		font-family: DIN;
		font-weight: bold;
		color: #FF1D4D;
	}

	.qo-t4 {
		position: relative;
		display: inline-block;
	}

	.qo-t5 {
		position: absolute;
		top: 20rpx;
		right: 0;
		width: 60rpx;
		height: 1rpx;
		border: 1px solid #333333;
	}

	.qo-t6 {
		margin-left: 20rpx;
		font-size: 30rpx;
		font-family: DIN;
		font-weight: bold;
		color: #333333;
	}

	.q-list {
		margin-top: -80rpx;
	}

	.li-lists {
		display: flex;
		overflow: hidden;
		margin: 28rpx auto 0;
		width: 639rpx;
		height: 90rpx;
		background: #F2F1F8;
		border-radius: 16rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 90rpx;
	}

	.li-lists-ipt {
		display: inline-block;
		margin: 20rpx 0 0;
		color: #333333;
	}

	.li-lists-text {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		margin-left: 20rpx;
	}

	.tip-text {
		margin: 23rpx 0 0 57rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.foo-li {
		position: relative;
	}

	.button {
		display: flex;
		margin: 60rpx 0 0 0;
		padding: 30rpx 26rpx 0;
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -9rpx 14rpx 0rpx rgba(134, 134, 134, 0.15);
	}

	.button-one {
		height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
	}

	.button-two {
		height: 80rpx;
		flex: 1;
		font-size: 42rpx;
		font-family: DIN;
		font-weight: bold;
		color: #FF1D4D;
		line-height: 80rpx;
	}

	.button-three {
		width: 264rpx;
		height: 80rpx;
		background: #F5D792;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		text-align: center;
		line-height: 80rpx;
	}

	.phone-btn {
		margin-top: 20rpx;
		width: 120rpx;
		height: 56rpx;
		border: 2px solid #34C8E8;
		border-radius: 28rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #4CCFEB;
	}
</style>